<template>
    <div>
      <el-row class="lock-btn">
        <el-input v-model="queryParams.faultNo" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入工单号"></el-input>
        <el-input v-model="queryParams.lockMac" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入编号"></el-input>
        <el-input v-model="queryParams.lockName" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入站点名称"></el-input>
        <el-select style="width:200px;margin-left:5px;"  v-model="queryParams.isProced" placeholder="选择是否处理">
            <el-option key="0" label="全部" :value = "''"></el-option>
            <el-option key="1" label="未处理" :value="0"></el-option>
            <el-option key="2" label="已处理" :value="1"></el-option>
          </el-select>
        <el-button style="margin-left:10px" size="medium" type="primary" @click="queryBtn" round>搜索</el-button>

      </el-row>
     
      <el-row style="box-shadow: rgb(205 205 205) 1px 1px 8px;">
        <el-col :span="24">
          <el-table :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row  ref="lcredepositrequestTable" v-loading="loading" :data="list" :stripe="true" :row-key="'id'" :max-height="clientHeight" :height="clientHeight" @selection-change="handleTableChange">
        
            <el-table-column prop="lockMac" label="编号" width="150" sortable align="center">
            </el-table-column>
            <el-table-column prop="lockName" label="站点名称" width="130" sortable align="center">
            </el-table-column>
                
            <el-table-column prop="faultDesc" label="问题描述" width="100" align="left">
            </el-table-column>
          
            
            <el-table-column prop="procMethod" label="解决方案" width="100" align="center">
            </el-table-column>
           
            <el-table-column prop="procDate" label="维修日期" width="180" align="center">
            </el-table-column>
            
            <el-table-column prop="isProced" label="处理状态" width="100" align="center">
           <template slot-scope="{ row }">
          <el-tag
            v-if="row.isProced == 0"
            size="medium"
            type="danger"
            effect="dark"
            style="font-size: 14px"
            >未处理</el-tag
          >
          <el-tag
            v-else-if="row.isProced == 1"
            size="medium"
            type="success"
            effect="dark"
            style="font-size: 14px"
            >已处理</el-tag
          >
          <el-tag v-else size="medium" type="Info" style="font-size: 14px">
            无
          </el-tag>
           </template>
            </el-table-column> 

        <el-table-column prop="livePic" label="图片" width="180" align="center">
          <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            查看
          </el-button>
        </template>
            </el-table-column>
 
            <el-table-column prop="repairPersonFact" label="实际维修人员" width="180" align="center">
            </el-table-column>
 
            <el-table-column prop="repairPerson" label="通知维修人员" width="180" align="center">
            </el-table-column>

            <el-table-column prop="faultNo" label="工单号" width="210" align="center">
            </el-table-column>  
            <el-table-column prop="createDate" label="创建时间" width="180" align="center">
            </el-table-column>

            <el-table-column label="编辑" width="180" fixed="right" align="center">
            <template slot-scope="scope">
            <el-button :disabled="userState" class="operateBtn" size="mini" type="primary" @click="editBtn2(scope.$index, scope.row)" title="编辑"><i class="el-icon-edit-outline"></i></el-button>
            </template>
            </el-table-column>
           

          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="page-tool">
          <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange">
          </el-pagination>
        </el-col>
      </el-row>
  

      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" center width="1210px">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
      >
        <el-image 
             style="width:1152px;height:648px;"
            :src="url" 
            :preview-src-list="srcList">
            <div slot="error" class="image-slot" style="text-align:center">
                暂无图片
            </div>
        </el-image>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
      </div>
    </el-dialog>



    <el-dialog
      title="编辑"
      :visible.sync="addDialog2"
      :width="'800px'"
      :destroy-on-close="true"
    >
      <el-form :model="feeForm" ref="feeForm">
       
        <el-row>
          <el-col span="11">
            <el-form-item label="工单号" :label-width="labelWidth">
              <el-input
                v-model="feeForm.faultNo"
                disabled
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item
              label="编号"
              :label-width="labelWidth"
            >
              <el-input
                v-model="feeForm.lockMac"
                disabled
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item
              label="站点名称"
              :label-width="labelWidth"
              prop="lockName"
            >
              <el-input
                v-model="feeForm.lockName"
                disabled
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col span="12">
            <el-form-item
             
              label="维修日期"
              :label-width="labelWidth"
              prop="procDate"
            >
              <el-input
                disabled
                v-model="feeForm.procDate"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>

         


        </el-row>
        <el-row>
          <el-col span="11">
            <el-form-item
              label="创建时间"
              :label-width="labelWidth"
              prop="createDate"
            >
              <el-input
                disabled
                v-model="feeForm.createDate"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col> 
          

        </el-row>

        <el-row>

        <el-col span="18">
            <el-form-item
              label="问题描述"
              :label-width="labelWidth"
              prop="faultDesc"
            >

            
            <el-select v-model="feeForm.faultDesc" placeholder="请选择问题类型" >
                <el-option key="0" label="设备离线" :value="0"></el-option>
                <el-option key="1" label="设备断电" :value="1"></el-option>
                <el-option key="2" label="起落异常" :value="2"></el-option>
                <el-option key="3" label="充电异常" :value="3"></el-option>
                <el-option key="4" label="挡车部件损坏" :value="4"></el-option>
                <!-- <el-option key="5" label="其他" :value="5"></el-option> -->
              </el-select>
            <!-- <el-input
                v-model="feeForm.faultDesc"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5}"
                placeholder="请输入内容"
              ></el-input> -->

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="18">
            <el-form-item
              label="解决方案"
              :label-width="labelWidth"
              prop="procMethod"
            >
            <!-- <el-input
                v-model="feeForm.procMethod"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5}"
                placeholder="请输入内容"
              ></el-input> -->
 

              <el-select v-model="feeForm.procMethod" placeholder="请选择解决方案" >
                <el-option key="0" label="现场排查" :value="0"></el-option>
                <el-option key="1" label="断电重启" :value="1"></el-option>
                <el-option key="2" label="检查通讯模块" :value="2"></el-option>
                <el-option key="3" label="更换电路板" :value="3"></el-option>
                <el-option key="4" label="更换枪线" :value="4"></el-option>
                <el-option key="5" label="钣金修复" :value="5"></el-option>
                <el-option key="6" label="更换雷达" :value="6"></el-option>
                <el-option key="7" label="更换部件" :value="7"></el-option>
                <el-option key="8" label="更换电路控制板" :value="8"></el-option>
                <el-option key="9" label="更换开关电源" :value="10"></el-option>
                <el-option key="10" label="更换电机控制器" :value="10"></el-option>
                <el-option key="11" label="更换空开" :value="11"></el-option>
                <el-option key="12" label="更换急停" :value="12"></el-option>
                <el-option key="13" label="更换电表" :value="13"></el-option>
                <el-option key="14" label="自动恢复" :value="14"></el-option>
                <el-option key="15" label="人工处理" :value="15"></el-option>
                <!-- <el-option key="16" label="其他" :value="16"></el-option> -->
              </el-select>
             
            </el-form-item>
          </el-col> 
          

        </el-row>

      <el-row>
          <el-col span="12">
            <el-form-item label="处理状态" :label-width="labelWidth">

              <el-select v-model="feeForm.isProced" placeholder="请选择类型" @change="handleChangeType(form.type)">
            <el-option key="0" label="未处理" :value="0"></el-option>
            <el-option key="1" label="已处理" :value="1"></el-option>
          </el-select>

           </el-form-item>
          </el-col>
          
        </el-row>
        <el-row>
        <el-col span="12">
            <el-form-item
             
              label="维修人员"
              :label-width="labelWidth"
              disabled
              prop="repairPersonFact"
            >
              <el-input
                v-model="feeForm.repairPersonFact"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
       

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle2">取消</el-button>
        <el-button type="primary" @click="Channelcheck2">修改</el-button>
      </div>
    </el-dialog>


  
  </div>
  </template>
  
  <script>
   
  import { getNickName, getTestUserName,getRoleCode } from "../../util/auth";
  import { deviceRepairApi,updateLcRepairProcApi } from "../../api/oplog.js";
  
  export default {
    name: "oplog",
    data: function () {
      return {
        clientHeight:
          Math.max(
            document.documentElement.scrollHeight,
            document.body.scrollHeight
          ) -
          132 -
          5 +
          10 -
          28,
        labelWidth: "75px",
        loading: false,
        dialogTitle: "",
        pageNo: 1,
        pageSize:20,
        addDialog2:false,
        statusOptions:['一步运维','管理员运维平台','运营商管理平台'],
        statusOptions2:['设备操作','规格修改'],
        total: 0,
        multipleSelection: [],
        dialogFormVisible:false,
        dialogStatus: "",
        feeForm:{},
        textMap: {
        update: "查看",
         create: "查看",
        },
        lcredepositrequests: [],
        form: {
          
        },
        roleCode:'',
        queryParams:{
          faultNo:'',
          lockMac:'',
          lockName:'',
          faultSource:'',
          procRate:'',
          isReport:''
        },
        addDialog:false,
        parkfieldList: [],
        parkfieldId: '',
        status: '',
  
      };
    },
    methods: {
      // editBtn (index, row) {
      //   let _this = this;
      //   _this.$nextTick(()=>{
      //     if(_this.$refs.form != undefined){
      //       _this.$refs.form.resetFields();
      //     }
      //   });
      //   _this.feeForm = row;
      //   _this.addDialog = true;
      // },
      
      
      procRefund (index, row, status) {
        let _this = this;
        _this.loading = true;
        procRefundApi(row.id, status).then(resp => {
          console.log(resp)
          _this.loadAbnormalOrder(this.pageNo, this.pageSize);
          _this.$notify({
                title: "成功",
                message: "已处理",
                type: "success"
              });
        });
      },
 
      handlePageChange (pageSize) {
        this.pageSize = pageSize;
        this.loaddeviceRepair(this.pageNo, this.pageSize);
      },
      handleNoChange (pageNo) {
        this.pageNo = pageNo;
        this.loaddeviceRepair(this.pageNo, this.pageSize);
      },
      handleTableChange (val) {
        this.multipleSelection = val;
      },

      
      loaddeviceRepair (pageNo, pageSize) {
        let _this = this;
        _this.loading = true;
      deviceRepairApi( {
          faultNo:_this.queryParams.faultNo,
          lockMac:_this.queryParams.lockMac,
          lockName:_this.queryParams.lockName,
          pageNo:pageNo,
          pageSize:pageSize
        }).then(resp => {
            if (resp.errmsg === "ok") {
              console.log(resp.data.dataList);
              _this.total = resp.data.totalNum;
           
            for (let i = 0; i < resp.data.dataList.length; i++) {
                  console.log(resp.data.dataList[i].repairPerson);
                let repairPersonLocal = resp.data.dataList[i].repairPerson.split(';');
                var repairPersonStr = '';
                for (let j = 0; j < repairPersonLocal.length; j++) {
 
                    repairPersonStr = repairPersonStr + repairPersonLocal[j].split(',')[1]+"; ";

                }

                resp.data.dataList[i].repairPerson = repairPersonStr.replace('undefined;','');

            }

              _this.list = resp.data.dataList;

            }
            setTimeout(() => {
            _this.loading = false;
          }, 1 * 1000);
        });
      },

      editBtn2 (index, row) {
      let _this = this;
      _this.$nextTick(()=>{
        if(_this.$refs.form != undefined){
          _this.$refs.form.resetFields();
        }
      });
      _this.feeForm = row;
      _this.addDialog2 = true;
    },

    cancle2(){
      let _this = this;
      _this.addDialog2 = false;
    },

    
    Channelcheck2(){
      let _this = this;

      var faultDesc = _this.feeForm.faultDesc;

      if(_this.feeForm.faultDesc == "0"){

         faultDesc = "设备离线";

      }else if(_this.feeForm.faultDesc == "1"){
  
        faultDesc = "设备断电";

      }else if(_this.feeForm.faultDesc == "2"){
  
        faultDesc = "起落异常";

      }else if(_this.feeForm.faultDesc == "3"){
  
          faultDesc = "充电异常";

        }else if(_this.feeForm.faultDesc == "4"){
  
        faultDesc = "部件损坏";

      }
      // else  if(_this.feeForm.faultDesc == "5"){
      //   faultDesc = "其他";
      // }

      var procMethod = _this.feeForm.procMethod;

      if(_this.feeForm.procMethod == "0"){
        
         procMethod = "现场排查";

      }else if(_this.feeForm.procMethod == "1"){

        procMethod = "断电重启";

      }else if(_this.feeForm.procMethod == "2"){

        procMethod = "插拔通讯模块";
        
      }else if(_this.feeForm.procMethod == "3"){

        procMethod = "更换电路板";

        }else if(_this.feeForm.procMethod == "4"){

        procMethod = "更换枪线";

        }else if(_this.feeForm.procMethod == "5"){

        procMethod = "钣金修复";

        }else if(_this.feeForm.procMethod == "6"){

          procMethod = "更换雷达";

          }else if(_this.feeForm.procMethod == "7"){

          procMethod = "更换部件";

          }else if(_this.feeForm.procMethod == "8"){

            procMethod = "更换电路控制板";

            }else if(_this.feeForm.procMethod == "9"){

                 procMethod = "更换开关电源";

            }else if(_this.feeForm.procMethod == "10"){

              procMethod = "更换电机控制器";

            }else if(_this.feeForm.procMethod == "11"){

              procMethod = "更换空开";

            }else if(_this.feeForm.procMethod == "12"){

              procMethod = "更换急停";

              }else if(_this.feeForm.procMethod == "13"){

              procMethod = "更换电表";

              }else  if(_this.feeForm.procMethod == "14"){

                procMethod = "自动恢复";

                }else  if(_this.feeForm.procMethod == "15"){

               procMethod = "人工处理";

              } 


              if(faultDesc != "设备离线" &&  faultDesc != "设备断电" && faultDesc != "起落异常" && faultDesc != "充电异常" && faultDesc != "部件损坏"){

                      _this.$notify({
                      title: "错误提示",
                      message: "故障信息描述错误",
                      type: "success"
                    });

                    return;

              }

      const data = {
          lockMac:_this.feeForm.lockMac,
          procRate:_this.feeForm.procRate,
          faultDesc: faultDesc,
          procMethod:procMethod == null ? "" : procMethod,
          isProced:_this.feeForm.isProced,
          repairPersonFact:_this.feeForm.repairPersonFact == null ? "" : _this.feeForm.repairPersonFact,
          id:_this.feeForm.id,
          liveImage:''
      };

      updateLcRepairProcApi(data).then(resp => {
        if (resp.errmsg === "ok") {
        _this.$notify({
                title: "修改成功",
                message: "已处理",
                type: "success"
              });
              _this.addDialog2 = false;
            }else{
              _this.$notify({
                title: "修改失败",
                message: "已处理",
                type: "success"
              });
            }
      
      })
      .catch(resp =>{
        _this.$notify({
                title: "修改失败",
                message: "已处理",
                type: "success"
              });
      })

    },

      handleUpdate(row) {
      this.url = '';
      this.temp = Object.assign({}, row); // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp);
      this.dialogStatus = "查看";
      this.dialogFormVisible = true;
      // console.log('1111111111111111111111111111111',this.url);
      this.url = row.livePic;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
  
      queryBtn () {
        let _this = this;
        _this.loading = true;
        const data = {
          faultNo:_this.queryParams.faultNo,
          lockMac:_this.queryParams.lockMac,
          lockName:_this.queryParams.lockName,
          isProced:_this.queryParams.isProced,
          pageNo:_this.pageNo,
          pageSize:_this.pageSize,
      };
      deviceRepairApi(data).then(resp => {
          _this.lcredepositrequests = resp.data;
          _this.total = resp.data.totalNum;
          _this.list = resp.data.dataList;
          _this.loading = false;
        });
      }
    },
    computed: {
      userState () {
        return getNickName() === getTestUserName();
      }
    },
    mounted: function () {
      let _this = this;
      _this.roleCode = getRoleCode()
      this.$nextTick(function () {
        this.loaddeviceRepair(_this.pageNo, _this.pageSize);
      });
    }
  }
  </script>
  
  <style scoped>
  .page-tool {
    background:#dfeaf9;
  }
  
  .page-tool div {
    text-align: right;
  }
  
  .lock-btn {
    margin-bottom: 5px;
    margin-top: -10px;
  }
  .operateBtn {
    font-size: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  </style>